<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* Font Awesome CSS included under settings */

        body {
            /* Avoid scrollbars */

            color: white;
            background-color: black;
            margin: 0;
            overflow: hidden;
        }

        .hidden {
            display: none;
        }

        .top {
            position: absolute;
        }

        .top button,
        .top input {
            margin-left: 10px;
        }

        #shareUrlDiv {
            padding: 10px;
            background-color: gray;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 10px 10px 10px black;
        }

        #shareUrlInput {
            width: 380px;
            margin: 10px 0px 10px 0px;
        }
    </style>
</head>
<body>
<div class="top">
    <button id="random">Random</button>
    <button id="shareButton"><i class="fa fa-share"></i> Share</button>
    <button id="advancedButton"><i class="fa fa-cog"></i> Toggle advanced controls</button>
    <span id="advanced" class="hidden">
    <input type="number" id="R"/>
    <input type="number" id="rr"/>
    <input type="number" id="p"/>
    <button id="setValues">Set</button>
    <button id="clear" style="display: none;">Clear</button>
  </span>
    <br>
</div>
<div id="shareUrlDiv" class="hidden">Copy this URL:
    <br>
    <input id="shareUrlInput" type="text"/>
    <button id="closeShareUrlButton"><i class="fa fa-times"></i> Close</button>
</div>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>

<script>
    /*
     * http://en.wikipedia.org/wiki/Spirograph
     */
    (function () {
        var canvas = document.getElementById("canvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        var ctx = canvas.getContext('2d');

        // The angle
        var t = 0;

        // This is the point we want to draw
        var x, y;

        // radius of outer circle
        var R;

        // radius of inner circle
        var r;

        // a point inside the inner circle, distance from it's center
        var p;

        var l;
        var k;

        var red;
        var green;
        var blue;

        var i;

        R = getValueOrDefaultAndSet("R", 350);
        r = getValueOrDefaultAndSet("rr", 220);
        p = getValueOrDefaultAndSet("p", 180);

        l = p / r;
        k = r / R;

        function getValueOrDefaultAndSet(variableName, defaultValue) {
            var value = parseInt(getQueryVariable(variableName), 10);
            if (isNaN(value)) {
                value = defaultValue;
            }
            document.getElementById(variableName).value = value;
            return value;
        }

        function draw() {
            for (i = 0; i < 800; ++i) {

                // This is the core spirograph algorithm. Adjusted to be in the middle of the screen.
                x = R * ((1 - k) * Math.cos(t) + l * k * Math.cos((1 - k) / k * t)) + canvas.width / 2;
                y = R * ((1 - k) * Math.sin(t) - l * k * Math.sin((1 - k) / k * t)) + canvas.height / 2;

                red = Math.round((Math.sin(t) + 1) * 128);
                green = Math.round((Math.sin(t + Math.PI * 2 / 3) + 1) * 128);
                blue = Math.round((Math.sin(t + Math.PI * 4 / 3) + 1) * 128);

                ctx.fillStyle = "rgba(" + red + ", " + green + ", " + blue + ", 0.5)";
                ctx.fillRect(x, y, 1, 1);
                ctx.fill();
                t += 0.001;
            }
            window.requestAnimationFrame(draw);
        }

        window.requestAnimationFrame(draw);

        function getRandomNumberWithMax(max) {
            return Math.floor(Math.random() * max);
        }

        function clear() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        function startRandom() {
            clear();

            // A real spirograph must have R > r > p
            // we are cheating.
            R = getRandomNumberWithMax(600);
            r = getRandomNumberWithMax(600); //(R);
            p = getRandomNumberWithMax(600); //(r);
            l = p / r;
            k = r / R;
            document.getElementById("R").value = R;
            document.getElementById("rr").value = r;
            document.getElementById("p").value = p;
            updateUrl();
            console.log("R: " + R + ", r: " + r + ", p:" + p);
        }

        function setValues() {
            clear();
            R = document.getElementById("R").value;
            r = document.getElementById("rr").value;
            p = document.getElementById("p").value;
            l = p / r;
            k = r / R;
            updateUrl();
        }

        function updateUrl() {
            history.replaceState(
                    "dummy",
                    "dummy",
                    "?R=" + R +
                    "&r=" + r +
                    "&p=" + p
            );
        }



        function toggleAdvanced() {
            document.getElementById("advanced").classList.toggle("hidden");
        }

        function closeShareUrl() {
            document.getElementById("shareUrlDiv").classList.add("hidden");
        }

        document.getElementById("random").addEventListener("click", startRandom);
        document.getElementById("shareButton").addEventListener("click", share);
        document.getElementById("setValues").addEventListener("click", setValues);
        document.getElementById("clear").addEventListener("click", clear);
        document.getElementById("advancedButton").addEventListener("click", toggleAdvanced);
        document.getElementById("closeShareUrlButton").addEventListener("click", closeShareUrl);

        // This works fine on desktop but not
        // on iOS
        function onresize() {
            if (canvas.width != window.innerWidth) {
                canvas.width = window.innerWidth;
            }
            if (canvas.height != window.innerHeight) {
                canvas.height = window.innerHeight;
            }
        }

        //window.addEventListener("resize", onresize, false);

        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
        }
    })();
</script>